<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}  <!--最常规的绑定-->
    <!--v-bind:绑定属性-->
    <!--<span v-bind:title="info1">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>-->
    <span :title="info1">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span><br/>
    <!--条件判断的-->
    <p v-if="state">现在你看到我了</p>
    <!--循环-->
    <ol>
        <li v-for="pro in proList">
            {{pro.productid}}---{{pro.productname}}
        </li>
    </ol>
    <!--事件触发-->
    <button v-on:click="saveInfo">点击</button>
    <button @click="saveInfo">点击</button>
    <!--data改变展示改变   view输入改变  data直接改变-->
    <input v-model="username">

</div>
<script>
    var app = new Vue({
        el: '#app',//我需要和那个区域做绑定
        data: {//数据
            message: 'Hello Vue!',
            info1:"提示信息",
            state:true,
            username:"wxf",
            proList:[
                {"productid":1,"productname":"aaa"},
                {"productid":2,"productname":"bbb"},
                {"productid":3,"productname":"ccc"},
                {"productid":4,"productname":"ddd"},
                ]
        },
        methods:{
            saveInfo:function () {
                alert("时间触发");
                alert(app.username);
            }
        }
    })

</script>
</body>
</html>